<template>
    <div id="skin">
        <Page id="page" @on-change="changePage" :page-size="pageSize" :current="page" :total="total" simple />
        <dl v-for="item in list" @click="clickDl(item.value)" :class="item.selected ? 'selected' : ''">
            <dt ref="maps" :id="'maps'+item.id" :data-value="item.value"></dt>
            <dd>{{item.name}}</dd>
        </dl>
    </div>
</template>

<script>
    export default {
        name: "skin",
        data(){
          return {
              pageSize:6,
              total:0,
              page:1,
              list:[],
              selected_value:""  //选择的value
          }
        },
        model:{
            prop:"value"
        },
        props:{
            value:String
        },
        watch:{
            "selected_value"(value){
                for(let i=0;i<this.list.length;i++){
                    this.$set(this.list[i],"selected",0);
                    if(this.list[i].value == value){
                        this.$set(this.list[i],"selected",1);
                    }
                }
            }
        },
        created() {
            this.getSkinTotal();
            this.getSkinList();
        },
        methods:{
            //页面切花
            changePage(page){
                this.page = page;
                this.getSkinList();
            },
            //获取总数
            getSkinTotal(){
                Axios.post(window.sysinfo.url,Qs.stringify({
                    pages:"mapSkin",
                    doing:"getSkinTotal",
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.total = parseInt(res.data.data);
                        }
                    });
            },
            //获取列表
            getSkinList(){
                return Axios.post(window.sysinfo.url,Qs.stringify({
                    pages:"mapSkin",
                    doing:"getSkinList",
                    limit:[(this.page-1)*this.pageSize,this.pageSize],
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.list = res.data.data;
                            this.$nextTick(function(){
                                this.setMapSkin();
                            });
                        }
                    });
            },
            //设置地图皮肤
            setMapSkin(){
                this.$refs.maps.forEach(function(item){
                    new AMap.Map(item.getAttribute("id"),{
                        mapStyle:"amap://styles/"+item.getAttribute("data-value"),
                        dragEnable:false,
                        zoomEnable:false,
                        doubleClickZoom:false
                    });
                });
                for(let i=0;i<this.list.length;i++){
                    this.$set(this.list[i],"selected",0);
                    if(this.list[i].value == this.value){
                        this.$set(this.list[i],"selected",1);
                    }
                }
            },
            //点击地图列表
            clickDl(value){
                this.selected_value =value;
                this.$emit("on-skin",value);
            }
        }
    }
</script>

<style lang="less" scoped src="./skin.less"></style>
